<template>
  <div>
    <el-dialog
      title="手机端预览"
      :visible.sync="isShow"
      width="width"
    >
      <div class="preview-pop flex flex-center justify-content">
        <div class="phone-bg">
          <img
            class="header"
            src=""
            alt=""
          >
          <div class="box">
            <!-- 公司信息 -->
            <div class="flex flex-center">
              <img
                class="avatar"
                src=""
                alt=""
              >
              <div>
                <div class="name">
                  北京微展世XX
                </div>
                <div class="time">
                  5分钟前
                </div>
              </div>
            </div>
            <!-- content -->
            <div class="content">
              海尔新品海尔新品海尔新品海尔新品海尔新品海尔新品
            </div>
            <!-- 图片信息 -->
            <img
              class="cover"
              src=""
              alt=""
            >
            <div class="content">
              海尔新品海尔新品海尔新品海尔新品海尔新品海尔新品,海尔新品海尔新品海尔新品海尔新品海尔新品海尔新品
            </div>
          </div>
          <!-- 产品 -->
          <div class="product-wrap flex flex-col flex-center">
            <div class="product-item flex">
              <img
                class="product-cover"
                style="margin-right:12px"
              ></img>
              <div class="flex flex-col flex-one">
                <div class="name">方太油烟机</div>
                <div class="info">方太油烟机方太油烟机XXX</div>
              </div>
              <img
                class="link"
                src="https://dmi-static-1302217173.cos.ap-beijing.myqcloud.com/mini-wx-dmi/link-icon.png"
              ></img>
            </div>
          </div>
          <!-- 底部 -->
        <div class="footer flex flex-center">
          <div class="flex flex-col flex-center flex-one">
            <img class="icon" src="../../../../assets/image/dynamic/like-icon.png" alt="">
            <div class="font">0</div>
          </div>
          <div class="flex flex-col flex-center flex-one">
            <img class="icon" src="../../../../assets/image/dynamic/comments-icon.png" alt="">
            <div class="font">0</div>
          </div>
          <div class="flex flex-col flex-center flex-one">
            <img class="icon" src="../../../../assets/image/dynamic/forwarding-icon.png" alt="">
            <div class="font">0</div>
          </div>
          <div class="flex flex-col flex-center flex-one">
            <img class="icon"  src="../../../../assets/image/dynamic/collection-icon.png" alt="">
            <div class="font">0</div>
          </div>
        </div>
        </div>
        
        <div class="phone-bg"></div>
        <!-- <img class="phone-bg" src="../../../../assets/image/phone-bg.png" alt=""> -->
        <!-- <img class="phone-bg" src="../../../../assets/image/phone-bg.png" alt=""> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import x from ''
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    // company: Array
  },
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang='scss' scoped>
.preview-pop {
  .phone-bg {
    width: 292px;
    height: 581px;
    background: url('../../../../assets/image/phone-bg.png') center center
      no-repeat;
    background-size: 100% 100%;
    position: relative;
    // 头部
    .header {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: 255px;
      height: 60px;
      background: #eee;
      margin-bottom: 20px;
    }
    // 内容
    .box {
      margin-top: 80px;
      padding: 0 28px;
      box-sizing: border-box;
    }
    .avatar {
      width: 27px;
      height: 27px;
      background-color: #eee;
      margin-right: 10px;
    }
    .name {
      font-size: 10px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222222;
      margin-bottom: 6px;
    }
    .time {
      font-size: 8px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9ca0aa;
    }
    .content {
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 10px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #818181;
    }
    .cover {
      width: 235px;
      height: 141px;
      background-color: #eee;
    }
    // 产品
    /* 产品 */
    .product-wrap {
      padding-bottom: 20px;
    }
    .product-item {
      width: 224px;
      height: 70px;
      background: rgba(234, 242, 255, 0.47);
      border-radius: 14px;
      padding: 10px;
      box-sizing: border-box;
      margin-top: 8px;
    }
    .product-item .product-cover {
      width: 49px;
      height: 49px;
      background-color: #eee;
    }
    .product-item .name {
      font-size: 9px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #222222;
      margin-top: 3.2px;
    }
    .product-item .info {
      width: 74px;
      margin-top: 1.3px;
      font-size: 5px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666666;
    }
    .product-item .link {
      width: 16px;
      height: 16px;
      background-color: #eee;
    }
    .footer{
      width: 241px;

      position: absolute;
      bottom: 30px;
      left: 30px;
      .icon{
        width: 11.5px;
        height: 11.5px;
      }
      .font{
        margin-top: 2px;
        font-size: 8px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #848484;
      }
    }
  }
}
</style>